iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
自我挑戰組

使用flutter建構Android和iOs APP系列 第 7

Map資料格式(很像JS的Object)

  • 分享至 

  • xImage
  •  

目前架構變成這樣
https://ithelp.ithome.com.tw/upload/images/20181007/20111840JS0A4f1Gc4.png

  1. product_control.dart的按鈕點擊事件變成這樣,傳入一個Map物件
onPressed: () {
    addProduct({'title': 'Chocolate', 'image': 'assets/food.jpg'});
},
  1. product_manager.dart的初始化傳入物件就要是個包著map物件的list(key跟value都是string)
  final Map<String, String> startingProduct;

3.State組件中的變數的資料格式也要改

List<Map<String, String>> _products = [];
  1. addProduct方法的傳入值格式也要改
  void _addProduct(Map<String, String> product) {
    setState(() {
      _products.add(product);
    });
  }
  1. products.dart的傳入參數是根據product_manager.dart的,所以也跟著改
final List<Map<String, String>> products;

6.flatbutton的點擊事件就可以把map物件傳進去了(索引方式真的蠻像js)

FlatButton(
    child: Text('Details'),
    onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(
                builder: (BuildContext context) => ProductPage(
                    products[index]['title'], products[index]['image']
                ),
            ),
        ),
)
  1. page/product.dart
import 'package:flutter/material.dart';

class ProductPage extends StatelessWidget {
  final String title;
  final String imageUrl;

  ProductPage(this.title, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        //水平置中用
        children: <Widget>[
          Image.asset(imageUrl),
          Container(
            padding: EdgeInsets.all(10.0),
            child: Text(title),
          ),
          Container(
            padding: EdgeInsets.all(10.0),
            child: RaisedButton(
              color: Theme.of(context).accentColor,
              child: Text('BACK'),
              onPressed: () => Navigator.pop(context),
            ),
          )
        ],
      ),
    );
  }
}


主題來源:
Learn Flutter & Dart to Build iOS & Android Apps


上一篇
導覽列
下一篇
刪除商品
系列文
使用flutter建構Android和iOs APP25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言